iT邦幫忙

2023 iThome 鐵人賽

DAY 27
1
Modern Web

你應該要知道的CSS技巧:發掘被忽略但實用的屬性系列 第 27

【Day27】 用CSS畫出各種形狀 - <basic-shape>

  • 分享至 

  • xImage
  •  

CSS Shape

CSS Shape支援度:Can I Use)

<basic-shape>是一種表現基礎圖形的CSS數據類型,主要用於clip-path和shape-outside屬性中。
有時我們會需要特殊的形狀動畫效果或是文字需要避開特殊的形狀範圍就可以使用css shape

  1. shape-outside範例:
.left{
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #cd0000;
  clip-path: circle();
  shape-outside: circle();
}

https://ithelp.ithome.com.tw/upload/images/20231012/20111500FrRQB3lDTB.png

codepen範例

IT15-Day27- CSS shapes

參考來源


上一篇
【Day26】圓形進度條用CSS就可以做了! - CSS Conic Gradients
下一篇
【Day28】改變CSS的遊戲規則 - 自定義屬性CSS @property
系列文
你應該要知道的CSS技巧:發掘被忽略但實用的屬性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言